<script>
  import Clickoutside from '@/vuego/utils/clickoutside';
  import Emitter from '@/vuego/mixins/emitter';
  import VButton from '@/vuego/components/v-button/v-button';
  import VButtonGroup from '@/vuego/components/v-button/v-button-group';

  export default {
    name: 'VDropdown',
    componentName: 'VDropdown',
    mixins: [Emitter],
    directives: { Clickoutside },
    components: {
      VButton,
      VButtonGroup,
    },
    props: {
      trigger: {
        type: String,
        default: 'hover',
      },
      menuAlign: {
        type: String,
        default: 'end',
      },
      type: String,
      size: String,
      splitButton: Boolean,
      hideOnClick: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        timeout: null,
        visible: false,
      };
    },
    mounted() {
      this.$on('menu-item-click', this.handleMenuItemClick);
      this.initEvent();
    },
    watch: {
      visible(val) {
        this.broadcast('VDropdownMenu', 'visible', val);
        this.$emit('visible-change', val);
      },
    },
    methods: {
      show() {
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.visible = true;
        }, 250);
      },
      hide() {
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.visible = false;
        }, 150);
      },
      handleClick() {
        this.visible = !this.visible;
      },
      initEvent() {
        const { trigger, show, hide, handleClick, splitButton } = this;
        const triggerElm = splitButton
          ? this.$refs.trigger.$el
          : this.$slots.default[0].elm;

        if (triggerElm.disabled) return;
        if (trigger === 'hover') {
          triggerElm.addEventListener('mouseenter', show);
          triggerElm.addEventListener('mouseleave', hide);

          const dropdownElm = this.$slots.dropdown[0].elm;

          dropdownElm.addEventListener('mouseenter', show);
          dropdownElm.addEventListener('mouseleave', hide);
        } else if (trigger === 'click') {
          triggerElm.addEventListener('click', handleClick);
        }
      },
      handleMenuItemClick(command, instance) {
        if (this.hideOnClick) {
          this.visible = false;
        }
        this.$emit('command', command, instance);
      },
    },
    render() {
      const { hide, splitButton, type, size } = this;

      const handleClick = () => {
        this.$emit('click');
      };

      const triggerElm = !splitButton
        ? this.$slots.default
        : (<v-button-group>
            <v-button type={type} size={size} nativeOn-click={handleClick}>
              {this.$slots.default}
            </v-button>
            <v-button ref="trigger" type={type} size={size} class="v-dropdown__caret-button">
              <i class="v-dropdown__icon v-icon-caret-down"></i>
            </v-button>
          </v-button-group>);

      return (
        <div class="v-dropdown" v-clickoutside={hide}>
          {triggerElm}
          {this.$slots.dropdown}
        </div>
      );
    },
  };
</script>
